import { useState } from "react";
import "./index.scss";
import { Card, Form, Input, Button } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { login } from "@/store/reducers/user";

//登入页面
const Login = () => {
  const [form] = Form.useForm();
  const dispatch=useDispatch()
  //点击登入得到数据
  const finish = (values) => {
    console.log(values);
    dispatch(login(values))
  };
  //
   const value=useSelector(state=>state.userStore)
   console.log(value,"value")

  return (
    <div className="login-container">
      <Card title="用户登入" className="login-card">
        <Form form={form} onFinish={finish} labelCol={{ span: 4 }}>
    
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input placeholder="请输入密码" />
          </Form.Item>
          <Form.Item>
            <div style={{ textAlign: "center" }}>
              <Button htmlType="submit" type="primary" >
                登入
              </Button>
            </div>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};
export default Login;
